import React, { useState, useEffect } from 'react'
import { View, Image, Text } from '@tarojs/components'
import { AtTabs, AtIcon } from 'taro-ui'
import ToLogin from '../../compontents/toLogin'
import Taro from '@tarojs/taro'
import useModel from 'flooks';
import store from '../../stores/index'

import api from '../../http/api'
const { ajaxFilterBusiness } = api
import TagTab from '../../compontents/tagTab'
import { AtTag } from 'taro-ui'
import "taro-ui/dist/style/components/tag.scss";
import './index.less'

export default (props: any) => {
  const info: any = Taro.getStorageSync('info')
  const  uSchoolId  = info?JSON.parse(info).userInfo.uSchoolId:0
  // 全部类型
  const { typeAll } = useModel(store.typeAll, ['typeAll'])
  // 获取页面参数 
  const name = props.tid.split('name=')[1].split('&')[0]
  const currents = parseInt(props.tid.split('currents=')[1].split('&')[0])
  // 一级分类当前索引
  const [current, setCurrent] = useState(currents)
  // 二级分类当前索引
  const [current2, setCurrent2] = useState(0)
  // 价格高低排序  默认为由低到高 
  const [priceDirection, setPriceDirection] = useState(false)
  // 筛选条件 默认为1 销量
  const [filterActive, setFilterActive] = useState(1)
  // 商铺列表
  const [busList, setBusList] = useState([])
  //排序类型
  const [filter, setFilter] = useState('num')
  const [subType,setSubType] = useState(0)


  useEffect(() => {
    getList(typeAll[current].uType,0,filter)
  }, [])
  // 一级分类改变
  const tabChange = (e) => {
    const { id } = typeAll[e]
    setCurrent(e)
    setCurrent2(0)
    setTypeList2(formatType(typeAll[e].children, 'subName'))
    setFilterActive(1)
    setPriceDirection(false)
    getList(typeAll[e].uType,0,'num')
  }
  // 点击条件切换
  const filterChange = (i: any) => {
    setFilterActive(i)
    setPriceDirection(false)
    setFilter(i===1?'num':'time')
    getList(typeAll[current].uType,subType,i===1?'num':'time')
  }
  // 点击价格
  const filterChange2 = (i: any) => {
    setFilterActive(i)
    setFilter(priceDirection?'price':'priceDesc')
    getList(typeAll[current].uType,subType,priceDirection?'price':'priceDesc')
    setPriceDirection(!priceDirection)
  }
  // 页面跳转
  const toPage = (path: any) => {
    Taro.navigateTo({
      url: path
    })
  }
  // 格式化一级分类
  const formatType = (typeAll: any, name: any) => {
    const arr = [...typeAll]
    arr.map((item: any, i: any) => {
      item.title = item[name]
    })
    return arr
  }
  // 格式化二级分类
  const formatSubType = (names: String) => {
    const arr = typeAll.filter(item => item.name === names)
    return formatType(arr[0].children, 'subName')
  }
  // 二级分类列表
  const [typeList2, setTypeList2] = useState(formatSubType(name))

  //  二级分类切换
  const tTabChange = (item: any, i: any) => {
    const {uSubType} = item
    setFilterActive(1)
    setPriceDirection(false)
    setSubType(i===0?0:uSubType)
    getList(typeAll[current].uType,i===0?0:uSubType,'num')
  }
  // 获取商家列表
  const getList = (uType,uSubType,filter) => {
    ajaxFilterBusiness({
      uSchoolId,
      uType,
      uSubType,
      filter
    }).then((res: any) => {
      const { data } = res
      setBusList(data)
    })
  }
  const formatDiscount = (p1,p2)=>{
    const str = (Math.round(p1/p2*10 * Math.pow(10, 1)) / Math.pow(10, 1)).toFixed(1)
    return str    
  }
  return (
    <View className='uBusiness'>
      <ToLogin url='/pages/active/index'></ToLogin>
      <AtTabs
        className="tabs"
        current={current}
        scroll
        tabList={formatType(typeAll, 'name')}
        onClick={tabChange}>
      </AtTabs>
      <TagTab list={typeList2} tTabChange={tTabChange} />
      <View className='filter'>
        <View onClick={() => { filterChange(1) }} className={filterActive === 1 ? 'f1 f active' : 'f1 f'}>销量</View>
        <View onClick={() => { filterChange(2) }} className={filterActive === 2 ? 'f2 f active' : 'f2 f'}>新品</View>
        {/* <View onClick={() => { filterChange(3) }} className={filterActive === 3 ? 'f3 f active' : 'f3 f'}>距离</View> */}
        <View onClick={() => { filterChange2(4) }} className={filterActive === 4 ? 'f4 f active' : 'f4 f'}>
          <Text className="p1">价格</Text>
          {
            priceDirection ? <AtIcon className="p2" value='chevron-up' size='14' color={filterActive === 4 ? '#2F74FF' : '#333'}></AtIcon> : <AtIcon className="p2" value='chevron-down' size='14' color={filterActive === 4 ? '#2F74FF' : '#333'}></AtIcon>
          }
        </View>
      </View>
      <View className='shopContUl'>
        {
          busList.map((item: any, i: any) => (
            <View className='shopContLi' onClick={() => { toPage(`/pages/uBusinessDetail/index?uBusinessId=${item.id}`) }}>
              <Image className='ico' src={item.url.split(',')[0]} ></Image>
              <View className="subTitle">{item.title}</View>
              <View className="price">
                <Text className="priceNow">¥{item.price}</Text>
                <Text className="priceOld">¥{item.priceOld}</Text>
                <AtTag className='tagsC' type='primary' size='small'  circle>{formatDiscount(item.price,item.priceOld)}折</AtTag>
              </View>
            </View>
          ))
        }
      </View>
    </View>
  );
};
